<template>
  <div class="page">
    <van-nav-bar
      title="班级管理"
      left-text="返回首页"
      right-text="添加"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRigth"
    />
    <van-search
      v-model="key"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-cell v-if=" list.length > 0">
      <!-- 表单 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 滑动单元格 -->
        <van-swipe-cell v-for="item in list" :key="item.id">
          <van-cell :border="true" :title="item.className" />
          <template #right>
            <van-button square type="primary" text="编辑" @click="modifyClass(item)" />
            <van-button square type="danger" text="删除" @click="deleteClass(item)" />
          </template>
        </van-swipe-cell>
      </van-pull-refresh>
      <!-- 分页组件 -->
      <van-pagination v-model="currentPage" :page-count="total" mode="simple" @change="nextPage" />
    </van-cell>

    <van-empty
      v-else
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无数据"
    />

    <van-dialog
      v-model="showClassEdit"
      title="修改班级信息"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="editClass"
      @cancel="clearInput"
    >
      <van-cell-group>
        <!-- <van-field v-model="classInfo.id" label="编号" placeholder="请输入编号" /> -->
        <van-field v-model="classInfo.className" label="班级名称" placeholder="请输入班级名称" />
        <van-field v-model="classInfo.practiceTitle" label="实训名称" placeholder="请输入实训名称" />
        <van-field v-model="classInfo.practiceContent" label="实训内容" placeholder="请输入实训内容" />
      </van-cell-group>
    </van-dialog>

  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { getClassList, addClass, modifyClass, deletedClass } from '../../../api/class.js'

export default {
  name: 'ClassIndex',
  data: function() {
    return {
      msg: '主页',
      list: [

      ],
      key: '',
      currentPage: 1,
      total: 20,
      refreshing: false,
      classInfo: {},
      showClassEdit: false
    }
  },
  // 进入页面前执行的钩子函数
  mounted() {
    this.getList()
    // console.log('班级页面渲染完成', this.list)
  },
  methods: {
    // 点击顶部导航栏左侧
    onClickLeft() {
      this.$router.go(-1)
    },
    // 点击顶部导航栏右侧
    onClickRigth() {
      console.log('添加班级')
      this.classInfo = {}
      this.showClassEdit = true
    },

    // 弹窗关闭前调用方法
    beforeClose(action, done) {
      done(false)
    },
    // 刷新前调用
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        // =========== 获取班级列表方法
        this.getList()
        // ===============
        this.loading = false

        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    },
    // 刷新列表
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    // 修改按钮执行方法
    modifyClass(item) {
      console.log(item)
      this.classInfo = item
      // 显示弹窗
      this.showClassEdit = true
    },
    // 删除按钮执行方法
    deleteClass(item) {
      Dialog.confirm({
        message: '确定删除吗？'
      }).then(() => {
        // 调用接口
        console.log('确认删除', item.id)
        const params = {
          id: item.id
        }
        deletedClass(params).then((res) => {
          Toast(res.msg)
          console.log(res)
          // 刷新列表
          this.getList()
        })
      }).catch(() => {
        console.log('取消删除')
      })
      console.log(item)
    },
    // 搜索框执行方法
    onSearch() {
      this.getList()
    },
    onCancel() {
      this.key = ''
    },
    // 请求下一页
    nextPage() {
      this.getList()
    },
    // 获取列表方法
    getList() {
      // 包装参数
      const patams = {
        page: this.currentPage,
        size: 10,
        key: this.key
      }
      // 请求接口
      getClassList(patams).then((res) => {
        // console.log(res)
        this.list = res.data.list
        this.total = res.data.pages
      })
    },
    // 编辑班级信息弹窗调用方法
    editClass() {
      console.log(this.classInfo)
      // 参数判断
      if (!this.classInfo.className) {
        Toast('缺少班级名称')
      }
      // 请求接口 如果id为空则为添加 不为空则为修改
      if (!this.classInfo.id) {
        addClass(this.classInfo).then(res => {
          Toast(res.msg)
          console.log(res)
          // 刷新列表
          this.getList()
          // 结束后调用
          this.clearInput()
        })
      } else {
        modifyClass(this.classInfo).then(res => {
          Toast(res.msg)
          console.log(res)
          // 刷新列表
          this.getList()
          // 结束后调用
          this.clearInput()
        })
      }
    },
    // 清除弹窗信息
    clearInput() {
      this.classInfo = {}
      this.showClassEdit = false
      // 刷新列表
      this.getList()
    }
  }
}

</script>

<style scoped>

</style>
